<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue测试02</title>
        <style type="text/css">
            .styleIns {
                color: red;
                font-family: "Monaco";
            }

            .fade1-enter-active,
            .fade1-leave-active {
                transition: opacity 1s
            }

            .fade1-enter,
            .fade1-leave-to {
                opacity: 0;
            }
        </style>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" v-on:click="show = !show" value="点一下">
            <div>
                <transition name="fade1">
                    <h1 v-show="show" class="styleIns">动画测试 - Hello World !</h1>
                </transition>
            </div>
        </div>

        <script type="text/javascript">
            var data = {
                show: true
            };
            var vm = new Vue({
                el: "#app",
                data: data
            });
        </script>
    </body>
</html>
